<template>
	<view class="content" style="position: relative;">
		<view class="" style="position: relative;top: 100rpx;z-index: 999;">
			<u-icon @click="goprev" name="arrow-left" color="#000" size="28"></u-icon>
		</view>


		<view
			style="position: absolute; top: 0;  width: 100%; height: 455rpx;background: linear-gradient(#f18f00, #f5a93c, #fce8c9)">

		</view>
		
		<view class="neirong" style="z-index: 999;position: relative;top: 150rpx;">
			<view class="top">
				<view class=""
					style="width: 95%;height: 80rpx;background-color: #fff;border-radius: 40rpx;margin: 0 auto;display: flex;align-items: center;justify-content: space-around;">
					<view class="">
						<image style="width: 50rpx;height: 50rpx;" src="../../static/search.png" mode=""></image>
					</view>
					<view class="" style="width: 500rpx;">
						<input type="text" placeholder="请输入要搜索的内容" />
					</view>
					<view class=""
						style="width: 130rpx;height: 70rpx;border-radius: 30rpx;background-color:#EF6232 ;color: #fff;text-align: center;line-height: 70rpx;">
						搜索
					</view>
				</view>
			</view>


			<view class="main">
				<!-- 左面部分 -->
				<view class="" style="padding: 20rpx;">
					<view class="" style="font-size: 38rpx;font-weight: 900;">
						{{title}}
					</view>

					<view class="" style="display: flex;">
						<u-rate :count="count" size="15" v-model="value"></u-rate>
						<view class="">
							10公里内10元起送
						</view>
					</view>

				</view>

				<view class="" style="text-align: center;padding: 20rpx;">
					<image @click="collectShop" v-if="collect == 0" style="width: 34rpx;height: 30rpx;" src="../../static/shoucangqian.png" mode=""></image>
					<image @click="collectShop1" v-if="collect == 1" style="width: 34rpx;height: 30rpx;" src="../../static/shoucanghou.png" mode=""></image>
					<view class="">
						收藏店铺
					</view>
				</view>


			</view>

			<!-- tab部分 -->
			<view class="footer">
				<!-- 左侧 -->
				<view class="footer_left">
					<view :class="item.id == cateId? 'mc active' : 'mc'" v-for="(item,index) in shopsList" :key="index" @click="ckfl(item, index)">
					    {{item.title}}
					  </view>

				</view>

				<view class="footer_right">
					<view class="canpin" v-for="(item,index) in shangp" :key="index">
						<view class="" style="margin-left: 20rpx;">
							<image style="width: 120rpx;height: 120rpx;" :src="item.images" mode=""></image>
						</view>
						<view class="" style="margin-left: 20rpx;font-size: 26rpx;width: 60%;">
							<view class="" style="width: 100%;">
								{{item.title}}
							</view>
							<view class="" style="display: flex;font-size: 26rpx;">
								<view class="" style="width: 50%;">
									<p style="color: #ccc;">月售 1800+</p>
									<p style="">￥{{item.discount_price}}</p>
								</view>
								<!-- <view class=""
									style="display: flex;align-items: center;text-align: center;width: 50%;margin-top: 30rpx;">
									<view class="anniu" @click="subtractionCard(index)">
										-
									</view>
									<view class="" style="margin-left: 20rpx;">
										{{item.car_num}}
									</view>
									<view class="anniu" @click="addCard(index)">
										+
									</view>
								</view> -->
								
								<view class="" @click="addShopCart(item)" style="border: 1rpx solid #ccc;align-items: center;height: 35rpx;padding: 10rpx;">
									添加购物车
								</view>
								
								

							</view>


						</view>



						<!-- <view class="" style="display: flex;align-items: center;text-align: center;">
							<view class="anniu">
								-
							</view>
							<view class=""style="margin-left: 20rpx;">
								0
							</view>
							<view class="anniu">
								+
							</view>
						</view> -->

					</view>
				</view>


			</view>


			<view class="gwc">
				<view class="" style="margin: 20rpx;" @click="popshow=true">
					<u-icon name="shopping-cart" color="#EFAA32 " size="40"></u-icon>
					<view class="shul">
						{{totalNumber}}
					</view>

					<view class="" style="margin-left: 100rpx;color: #E36444;">
						￥{{totalPrice||0}}
					</view>
				</view>

				<view class="jiesuan" @click="goOrderOther">
					结算
				</view>


			</view>



		</view>


		<u-popup :show="popshow" @close="popshow=false">
			<view style="max-height: 500rpx;overflow: auto;">
				<view class="canpin" v-for="(item,index) in cartList" :key="index">
					<view class="" style="margin-left: 20rpx;">
						<image style="width: 120rpx;height: 120rpx;" :src="item.good.images" mode=""></image>
					</view>
					<view class="" style="margin-left: 20rpx;font-size: 26rpx;width: 60%;">
						<view class="" style="width: 100%;">
							{{item.good.title}}
						</view>
						<view class="" style="display: flex;font-size: 26rpx;">
							<view class="" style="width: 50%;">
								<p style="color: #ccc;">月售 {{item.good.status}}</p>
								<p style="">￥{{item.good.discount_price}}</p>
							</view>
							<view class=""
								style="display: flex;align-items: center;text-align: center;width: 50%;margin-top: 30rpx;">
								<view class="anniu" @click="subtractionCard(item)">
									-
								</view>
								<view class="" style="margin-left: 20rpx;">
									{{item.number}}
								</view>
								<view class="anniu" @click="addCard(item)">
									+
								</view>
							</view>

						</view>


					</view>



					


				</view>
				<view class="jiesuan2" @click="goOrderOther">
					结算
				</view>
			</view>
		</u-popup>


	</view>


</template>



<script>
	export default {
		onLoad(option) {
			console.log(option, '看看')
			this.shopsId = option.id
			this.getShopList()

			this.value = option.value
			this.title = option.title
			this.cateId = uni.getStorageSync('shopOneId')
			this.getShops()
			this.collect = option.is_collect
			
		},
		onShow() {
			this.getCartList()
		},
		data() {
			return {
				popshow: false,
				count: '',
				value: '',
				shopsId: '',
				shopsList: [],
				shopOneId: '',
				cateId: '',
				title: '',
				shangp: [],
				goodSelext: [],
				collect:'',
				cartList:[],
				totalNumber:'',
				totalPrice :'',
				cartsShop:[],
				currentSelected: null // 记录当前选中的元素
				
				
				
				
			}
		},
		computed: {
			allNum() {
				let sum = 0
				this.goodSelext.forEach(ele => {
					sum += Number(ele.car_num);
				})
				return sum
			},
			allPrice() {
				let sum = 0
				this.goodSelext.forEach(ele => {
					sum += Number(ele.discount_price) * Number(ele.car_num);
				})
				return sum
			}
		},
		methods: {

			addCard(item) {
				item.number++
				console.log(item,'查看item是神')
				this.$req('POST',this.$api.cartAdd,{
					id:item.id
				}).then(res =>{
					console.log(res,'查看res是什么')
					if(res.status == 200){
						uni.$u.toast('添加成功')
					}
					
				})


			},
			subtractionCard(item) {
				item.number--
				this.$req('POST',this.$api.cartDel,{
					id:item.id
				}).then(res =>{
					if(res.status == 200){
						uni.$u.toast('减少成功')
						this.getCartList()
					}
					
				})
				
				
				
			},
			
			
			
			goprev() {
				uni.navigateBack()
			},
			// 获取商品分类
			getShopList() {
				this.$req('GET', this.$api.getCate, {}).then(res => {
					// console.log(res,'查看商品分类')
					this.shopsList = res.data
					this.shopOneId = res.data[0].id
					console.log(this.shopOneId, 'shopOneId')
					uni.setStorageSync('shopOneId', this.shopOneId)
					this.cateId = res.data[0].id
				})
			},
			ckfl(item,index) {  
				console.log(item,index,'查看这个index是什么')
				this.cateId = item.id
				this.getShops()
			},
			
			// 获取商品
			getShops() {
				this.$req('GET', this.$api.goodsList, {
					store_id: this.shopsId,
					cate_id: this.cateId
				}).then(res => {

					this.shangp = res.data.data.map((item) => {
						return {
							...item,
							car_num: 0
						}
					})
					console.log(this.shangp, '查看打印的商品')
				})
			},
			collectShop(){
				this.$req('POST',this.$api.setCollect,{
					user_id:uni.getStorageSync('userId'),
					store_id:this.shopsId
					
				}).then(res =>{
					console.log(res,'收藏取消收藏成功')
					this.collect = 1
				})
			},
			collectShop1(){
				this.$req('POST',this.$api.setCollect,{
					user_id:uni.getStorageSync('userId'),
					store_id:this.shopsId
					
				}).then(res =>{
					console.log(res,'收藏取消收藏成功')
					this.collect = 0
				})
			},
			addShopCart(item){
				this.$req('POST',this.$api.setCart,{
					goods_id:item.id,
					user_id:uni.getStorageSync('userId')
				}).then(res =>{
					this.getCartList()
				})
			},
			getCartList(){
				this.$req('POST',this.$api.cartList,{
					user_id:uni.getStorageSync('userId')
				}).then(res =>{
					
					this.cartList = res.data.list
					console.log(this.cartList,'查看获取的购物车列表')
					this.totalNumber = this.cartList.reduce((sum, item) => sum + item.number, 0);
					
					// this.totalPrice = this.cartList.reduce((sum, item) => sum + item.number * parseFloat(item.good.discount_price), 0);
					this.totalPrice = this.cartList.reduce((sum, item) => sum + item.number * parseFloat(item.good.discount_price), 0);
					this.totalPrice = this.totalPrice.toFixed(2);
					console.log(this.totalPrice,'this.totalPrice');
					
					// cartsShop
					this.cartsShop = this.cartList.map(item => ({ goods_id: item.goods_id, number: item.number }));
					
					console.log(this.cartsShop,'1111')
					
					
					
				})
			},
			
			goOrderOther(){
				uni.navigateTo({
					url: '/order-pkg/orderOther/orderOther'
				})
			}



		}
	}
</script>

<style>
	page {
		background: #f6f5f7;
	}

	.top {
		width: 100%;

	}

	.main {
		display: flex;
		justify-content: space-between;
		margin-top: 50rpx;
	}

	.footer {
		width: 100%;
		display: flex;
		justify-content: space-between;

	}

	.footer_left {
		width: 35%;

	}

	.footer_right {
		width: 65%;
		height: 800rpx;
		overflow-y: scroll;
		padding-left: 10rpx;
	}

	.mc {
	  width: 100%;
	  height: 80rpx;
	  text-align: center;
	  line-height: 80rpx;
	  margin-top: 10rpx;
	}
	.active {
		font-weight: 500;
		color: #16a2dc;
		background-color: #fff;
	}
	
	




	.canpin {
		width: 100%;
		display: flex;
		background-color: #fff;
		border-radius: 20rpx;
		margin-top: 40rpx;
		z-index: 9999;
		margin-bottom: 80rpx;

	}


	.anniu {
		width: 40rpx;
		height: 40rpx;
		background-color: orange;
		margin-left: 20rpx;
		border-radius: 50%;
		color: #fff;
		text-align: center;
		line-height: 40rpx;
	}

	.gwc {
		width: 100%;
		height: 128rpx;
		position: fixed;
		bottom: 50rpx;
		/* background-color: red; */
		display: flex;
		justify-content: space-between;
		align-items: center;
		z-index: 99999999;
	}

	.shul {
		width: 30rpx;
		height: 30rpx;
		text-align: center;
		line-height: 30rpx;
		background-color: #E36444;
		border-radius: 50%;
		margin-top: -80rpx;
		margin-left: 70rpx;

	}

	.jiesuan{
		width: 230rpx;
		height: 80rpx;
		background-color: #EF6232;
		color: #fff;
		text-align: center;
		line-height: 80rpx;
		border-radius: 40rpx;
		margin: 10rpx 30rpx;

	}
	

	.jiesuan2 {
		width: 230rpx;
		height: 80rpx;
		background-color: #EF6232;
		color: #fff;
		text-align: center;
		line-height: 80rpx;
		border-radius: 40rpx;
		position: absolute;
		bottom: 0;
		right: 0;
		margin-top: 20rpx;

	}
</style>